<template>
    <view class="Data">
        <image src="../../../static/imgs/mine/recruitBg.png" mode="" class="topBg"></image>
        <view class="title susPen">
            上传企业基本信息，

        </view>

        <view class="safeCenter susPen">
            您提供的信息将得到绝对保护
        </view>

        <view class="info">
            <view class="infoLine">
                <view class="infoType md6Text">
                    <text class="impor">*</text>企业名称
                </view>

                <view class="inputLine">
                    <input type="text" v-model="name" placeholder="请输入企业信息，与企业证照保持一致" />
                </view>
            </view>
            <view class="infoLine">
                <view class="infoType md6Text">
                    <text class="impor">*</text>所在区域
                </view>

                <view class="inputLine" @click="show_area = true;">
                    <input type="text" :value="prov ? prov+' '+city+' '+dist : ''" placeholder="请选择企业所在区域" :disabled="true" />
                </view>
            </view>

            <view class="infoLine">
                <view class="infoType md6Text">
                    <text class="impor">*</text>联系人姓名
                </view>

                <view class="inputLine">
                    <input type="text" v-model="contact" placeholder="请输入姓名" />
                </view>
            </view>

            <!-- <view class="infoLine">
                <view class="infoType md6Text">
                    <text class="impor">*</text>联系人手机号
                </view>

                <view class="inputLine">
                    <input type="text" v-model="mobile" placeholder="联系人手机号" disabled="" />
                </view>
            </view> -->

            <!-- 点击拍照上传 -->
            <view class="photo" @click="getImg()">
                <image :src="license_url || '../../../static/imgs/mine/photo.png'" mode=""></image>
            </view>
            
            <view style="text-align: center;margin-top: 20rpx;">企业招聘电脑端网址：www.lanjingwp.com</view>
        </view>
        <u-picker :show="show_area" ref="uPicker" keyName="name" :columns="areaList" @confirm="setArea"
            @change="changeArea" @cancel="show_area = false;"></u-picker>

        <view class="bottom">
            <button type="default" class="btn" @click="save()">提交</button>
        </view>
        <view class="maskPage" v-if="is_show">
            <view class="modal">
                <view class="box">
                    <image src="../../../static/imgs/mine/boxing.png" mode=""></image>
                    <view class="textArea smTitle">
                      		注册通过后，账户和密码将通过短信的形式发送到您注册的手机里，请注意保护好自己的账户信息。
                    </view>
                    <button type="default" class="confirm" @click="_toBack()">确定</button>
                </view>
            </view>

        </view>


    </view>
</template>

<script>
    export default {
        data() {
            return {
                is_show: false,

                name: '',
                contact: '',
                mobile: '',
                license: '',
                license_url: '',
                mobile: '',

                prov: '',
                city: '',
                dist: '',
                areaList: [],
                area_index: [0,0,0],
                show_area: false,
            }
        },
        onLoad() {
            this.getArea();
            
            var user = uni.getStorageSync('user');
            if(user) {
                this.mobile = user.mobile;
            }
        },
        methods: {
            getArea() {
                this._ajax({
                    url: '/api/index/getAreaTree',
                    success: res => {
                        if (res.code == 1) {
                            this.areaList = [res.data,res.data[0].childs,res.data[0].childs[0].childs];
                        }
                    }
                }, 1);
            },
            setArea(e) {
                this.show_area = false;
                console.log(JSON.stringify(e.value));
                this.prov = e.value[0].name;
                this.city = e.value[1].name;
                this.dist = e.value[2].name;
            },
            changeArea(e) {
                const {
                    columnIndex,
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e;
                this.area_index[columnIndex] = index;
                if (columnIndex === 0) {
                    picker.setColumnValues(1, this.areaList[0][index].childs);
                    picker.setColumnValues(2, this.areaList[0][index].childs[0].childs);
                }else if(columnIndex === 1) {
                    picker.setColumnValues(2, this.areaList[0][this.area_index[0]].childs[index].childs);
                }
            },
            getImg() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this._upload({
                            url: '/api/common/upload',
                            filePath: res.tempFilePaths[0],
                            success: res => {
                                if(res.code == 1) {
                                    this.license = res.data.url;
                                    this.license_url = res.data.fullurl;
                                }else{
                                    this._toast(res.msg);
                                }
                            }
                        });
                    }
                })
            },
            save() {
                if(!this.name) {
                    return this._toast('请输入企业名称');
                }
                if(!this.prov) {
                    return this._toast('请选择所在区域');
                }
                if(!this.contact) {
                    return this._toast('请输入联系人姓名');
                }
                if(!uni.$u.test.mobile(this.mobile)) {
                    return this._toast('请输入联系人手机号');
                }
                if(!this.license) {
                    return this._toast('请上传营业执照');
                }
                this._ajax({
                    url: '/api/user/companyApply',
                    data: {
                        name: this.name,
                        prov: this.prov,
                        city: this.city,
                        dist: this.dist,
                        contact: this.contact,
                        mobile: this.mobile,
                        license: this.license
                    },
                    success: res => {
                        if(res.code == 1) {
                            this.is_show = true;
                        }else{
                            this._toast(res.msg);
                        }
                    }
                }, 1);
            }
        }
    }
</script>

<style scoped lang='less'>
    .Data {
        width: 100%;
        position: relative;

        .topBg {
            width: 100%;
            height: 289upx;
        }

        .title {
            font-size: 44upx;
            color: #FFFFFF;
            top: 60upx;
        }

        .safeCenter {
            font-size: 40upx;
            color: #FFFFFF;
            top: 150upx;
        }

        .susPen {
            position: absolute;
            left: 52upx;
            z-index: 10;
        }

        .info {
            width: 100%;
            height: auto;
            position: absolute;
            top: 269upx;
            padding: 0 32upx 100rpx;
            background: #FFFFFF;
            border-radius: 16upx 16upx 0px 0px;
            margin-top: -20upx;

            .infoLine {
                width: 100%;
                height: 167upx;
                border-bottom: 1px solid #e5e5e5;
                padding-top: 36upx;
                padding-bottom: 22upx;

                .infoType {
                    padding-bottom: 25upx;
                }
            }
        }

        .photo {
            width: 322upx;
            margin: 42upx auto;

            image {
                width: 322upx;
                height: 274upx;
            }
        }

        .modal {
            position: fixed;
            z-index: 1200;
            top: 269upx;
            left: 56upx;
        }
    }

    .bottom {
        width: 100%;
        height: 116upx;
        position: fixed;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0px -10upx 80upx rgba(167, 167, 167, 0.16);
        opacity: 1;

        .btn {
     		     width: 686upx;
            height: 80upx;
            background: linear-gradient(110deg, #3465B1 0%, #5577AE 100%);
            box-shadow: 0px 4px 6px rgba(33, 159, 255, 0.36);
            opacity: 1;
            color: #FFFFFF;
    		      margin: 18upx auto;
            border-radius: 150upx;
        }
    }

    .maskPage {
    	   width: 100vw;
        height: 100vh;
     	  position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.4);
    }

    .box {
        width: 610upx;
        background: #FFFFFF;
        padding-bottom: 42upx;
      	 border-radius: 24upx;

        image {
    	       width: 610upx;
            height: 357upx;
            margin-top: -20upx;
        }

        .textArea {
            width: 540upx;
            margin: 44upx auto;
            line-height: 44upx;

        }

        .confirm {
            width: 540upx;
            height: 88upx;
            color: #fff;
            background: linear-gradient(180deg, #3465B1 0%, #789AD1 100%);
            opacity: 1;
            border-radius: 66upx;
        }
    }
</style>
